<template>
	<view>
		<!-- 背景图 + 用户基本信息 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="spacedata"></home-data>
		</view>
		<view style="height: 20rpx;background: #F4F4F4;"></view>
		<!-- tab导航 -->
		<swiper-tab-head
		:tabBars="tabBars"
		:tabIndex="tabIndex"
		@changeIndex="tabtap"
		scrollItemStyle="width:33.3%;"
		scrollStyle="border-bottom: 0;">
		</swiper-tab-head>
		
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in tabList" :key="index">
				<template v-if="tabIndex==0">
					<!-- 主页 -->
					<user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
				</template>
				<template v-else-if="tabIndex==index">
					<!-- 列表 -->
					<block v-for="(list, listindex) in item.list" :key="listindex">
						<common-list :item="list" :index="listindex"></common-list>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadText="item.loadText"></load-more>
				</template>
			</block>
			
			<!-- 操作菜单 -->
			<user-space-popup :show="show" @hide="toggleShow" @lahei="lahei" @beizhu="beizhu"></user-space-popup>
		</view>
	</view>
</template>

<script>
	import userSpaceHead from '../../components/user-space/user-space-head.vue'
	import homeData from '../../components/home/home-data.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import userSpaceUserinfo from '../../components/user-space/user-space-userinfo.vue'
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import userSpacePopup from '../../components/user-space/user-space-popup.vue'
	export default {
		components: {
			userSpaceHead,
			homeData,
			swiperTabHead,
			userSpaceUserinfo,
			commonList,
			loadMore,
			userSpacePopup,
		},
		data() {
			return {
				show: false,
				userinfo: {
					bgimg: 1,
					userpic: '../../static/logo.png',
					username: '昵称',
					sex: 0,
					age: 20,
					isguanzhu: false,
					regtime: '2020-12-30',
					id: 1213,
					birthday: '1997-11-26',
					job: 'IT',
					path: '四川',
					qg: '未婚'
				},
				spacedata: [
					{ name: '获赞', num: '10k' },
					{ name: '关注', num: 11 },
					{ name: '粉丝', num: 1 },
				],
				tabIndex: 0,
				tabBars: [
					{ name: '主页', id: 'zhuye' },
					{ name: '糗事', id: 'qiushi' },
					{ name: '动态', id: 'dongtai' },
				],
				tabList: [
					{},
					{
						loadText: '上拉加载更多',
						list: [
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 1, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/images/bg1.png',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
							// 文字
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 0, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 1, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/images/bg1.png',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
							// 文字
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 0, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
						]
					},
					{
						loadText: '上拉加载更多',
						list: [
							// 文字
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 0, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
							// 文字
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 0, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								sex: 1, // 0 男 1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/images/bg1.png',
								video: false,
								share: false,
								path: '四川 成都',
								sharenum: 20,
								commentnum: 30,
								goodnum: 35
							},
						]
					}
				]
			}
		},
		computed: {
		},
		onReachBottom() { // 页面上拉触底事件
			this.loadMore()
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.toggleShow()
			}
		},
		methods: {
			toggleShow() { // 操作菜单显示隐藏
				this.show = !this.show
			},
			lahei() { // 拉黑
				console.log('拉黑')
				this.toggleShow()
			},
			beizhu() { // 备注
				console.log('备注')
				this.toggleShow()
			},
			tabtap(index) { // 顶部滑块点击事件
				this.tabIndex = index
			},
			loadMore() { // 上拉加载
				if (this.tabList[this.tabIndex].loadText !== '上拉加载更多') return
				// 修改状态
				this.tabList[this.tabIndex].loadText = '加载中...'
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
						userpic: '../../static/logo.png',
						username: '昵称',
						sex: 1, // 0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/images/bg1.png',
						video: false,
						share: false,
						path: '四川 成都',
						sharenum: 20,
						commentnum: 30,
						goodnum: 35
					}
					this.tabList[this.tabIndex].list.push(obj)
					this.tabList[this.tabIndex].loadText = '上拉加载更多'
				}, 1000)
				// this.tabList[this.tabIndex].loadText = '没有更多数据了'
			}
		}
	}
</script>

<style lang="scss" scoped>
.user-space-margin {
	margin: 15rpx 0;
}
</style>
